<!--折线图-->
<template>
  <div class="chartcontainer" v-if="iffresh">
    <div :style="{'margin-bottom':'10px'}" v-if="title">{{title}}</div>
    <!-- :judge-width="true" -->
    <ve-line
      :data="blockdata"
      width="100%"
      height="100%"
      :settings="chartSettings"
      ref="mychart"
      :theme="theme"
      :judge-width="true"
      :after-config="afterConfig"
      :grid="chartGrid"
    ></ve-line>
  </div>
</template>

<script>
import VeLine from "v-charts/lib/line.common";
import "echarts/lib/component/legend";
import "echarts/lib/component/toolbox";
import { mBack, getToken, back } from "../../../assets/js/common.js";
import { fetch, post } from "../../../config/request.js";
export default {
  name: "block1",
  props: {
    chartData: [Object],
    changesizewidth: [Number, String],
    changesizeheight: [Number, String],
    theme: [Object],
    title: [String],
    searchid: [String],
    chartid: [String],
    mobiletype: [String],
    field: [String],
    isShowLegend: {
      type: Boolean,
      default: true
    },
    eArea: {
      type: Boolean,
      default: false
    },
    labelShow: {
      type: Boolean,
      default: true
    },
    isShowToolbox: {
      type: Boolean,
      default: true
    },
    eGrid: [Object],
    eAxisLabelRotate: {
      type: [Number, String],
      default: 45
    },
    eAxisLabelAlign:{
       type: [Number, String],
      default: 'vertical'
    }
  },
  data() {
    this.chartSettings = {
      yAxisName: [`${this.chartData.columns[1]}`], //   xAxisName: this.chartData.columns[0]
      label: {
        normal: {
          show: true
        }
      }
    };
    return {
      intervaltime: this.timer,
      blockdata: this.chartData,
      chartGrid: {
        left: 20,
        top: 20,
        right: 20,
        bottom: 100
      },
      xAxis: {
        axisLabel: {
          interval: 0,
          rotate: 0
        },
        type: "category"
      },

      iffresh: true
    };
  },

  components: { VeLine },
  created() {},
  mounted() {},
  destroyed() {},
  methods: {
    afterConfig(options) {
      var that=this;
      if (!this.isShowLegend) {
        options.legend = {
          data: []
        };
      }
      options.grid = this.eGrid;

      options.series.forEach(i => {
        if (this.eArea) {
          i.areaStyle = {
            normal: {}
          };
        }
        i.label = {
          normal: {
            show: this.labelShow
          }
        };
      });

      options.xAxis[0].axisLabel = {
        interval: 0,
         rotate: 45,
        formatter: function(value, index) {
          if (value.length > 6) {
            // 具体多少字就看自己了
            value = value.substr(0, 6) + "...";
          }
          // if (that.eAxisLabelAlign=='vertical') {
          //   // 垂直显示
          //   return value.split("").join("\n");
          // }
          return value;
        }
      };
      if (!this.isShowToolbox) {
        options.toolbox = {
          feature: {
            saveAsImage: {}
          }
        };
      }
      return options;
    }
  },
  watch: {
    changesizewidth(oldvalue, newvalue) {
      this.$refs.mychart.echarts.resize();
    },

    changesizeheight(oldvalue, newvalue) {
      this.$refs.mychart.echarts.resize();
    },
    chartData(oldvalue, newvalue) {
      this.blockdata = oldvalue;
      this.chartSettings = {
        yAxisName: [`${this.chartData.columns[1]}`], //   xAxisName: this.chartData.columns[0]
        label: {
          normal: {
            show: true
          }
        }
      };
      this.$refs.mychart.echarts.setOption({
        series: {
          data: this.blockdata
        }
      });
    }
  }
};
</script>
<style scoped lang="scss">
.chartcontainer {
  width: 100%;
  height: 100%;
}
</style>

